<template>
  <div>
    <a-form @submit="handleSave" :form="form">
      <a-row>
        <a-col :span="18" offset="3">
          <a-form-item
            label="角色名称"
            :labelCol="{ span: 7 }"
            :wrapperCol="{ span: 14 }"
          >
            <a-input
              v-decorator="[
                'name',
                {
                  initialValue: recordParams.name,
                  rules: [
                    {
                      required: true,
                      message: '请填写账户名称',
                    },
                  ],
                },
              ]"
            />
          </a-form-item>
          <a-form-item
            label="显示名称"
            :labelCol="{ span: 7 }"
            :wrapperCol="{ span: 14 }"
          >
            <a-input
              v-decorator="[
                'displayName',
                {
                  initialValue: recordParams.displayName,
                  rules: [
                    {
                      required: true,
                      message: '请填写显示名称',
                    },
                  ],
                },
              ]"
            />
          </a-form-item>
          <a-form-item
            label="显示名称"
            :labelCol="{ span: 7 }"
            :wrapperCol="{ span: 14 }" 
            v-show="false"
          >
            <a-input
              v-decorator="[
                'id',
                {
                  initialValue: recordParams.id,
                },
              ]"
            />
          </a-form-item>
          <a-form-item
            label="角色描述"
            :labelCol="{ span: 7 }"
            :wrapperCol="{ span: 14 }"
          >
            <a-input
              v-decorator="[
                'description',
                {
                  initialValue: recordParams.description,
                },
              ]"
            />
          </a-form-item>
          <a-form-item
            label="权限"
            :labelCol="{ span: 7 }"
            :wrapperCol="{ span: 14 }"
          >
            <a-select
              v-decorator="[
                'grantedPermissions',
                { initialValue: recordParams.grantedPermissions, rules: [
                    {
                      required: true,
                      message: '请填写显示名称',
                    },
                  ], },
              ]"
              mode="multiple"
            >
              <a-select-option
                v-for="(item, index) in permission"
                :value="item.displayName"
                :key="index"
              >
                {{ item.displayName }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6" :offset="12">
          <a-form-item>
            <a-button type="primary" htmlType="submit"> 保存 </a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script>
import { updateRole, getAllPer } from "../../services/dataSource";
export default {
  name: "addEqu",
  props: {
    queryEqument: {
      type: Function,
      default() {
        return Function;
      },
    },
    recordParams: {
      type: Object,
      default() {
        return {};
      },
    },
  },

  data() {
    return {
      params: {},
      isActive: false,
      form: this.$form.createForm(this),
      permission: [],
    };
  },
  methods: {
    handleSelect1(e) {
      this.isActive = e.target.value;
    },
    //保存
    handleSave(e) {
     e.preventDefault();
      this.form.validateFields((err, value) => {
        if (!err) {
          updateRole(value).then((res) => {
        if (res.data.success == true) {
          this.$message.success("更新成功！");
          this.queryEqument();
        } else {
          this.$message.error("更新失败，请重试！");
        }
      });
        }
      })
      
    },
  },
  created() {
    getAllPer().then((res) => {
      this.permission = res.data.result.items;
    });
  },
  mounted() {},
};
</script>
